<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view> -->
		
		<view class="goodnav">
			<view class="navitem " @tap="change(item.nav)" :class="item.nav == params.tab? 'active' : ''" v-for="(item, index) in navlist" :key="index">
				{{item.name}}
			</view>
		</view>
		<view v-for="item in goodlist" :key="item.id" @tap="goto(item.id)">
			<image :src="item.author.avatar_url" mode=""></image>
			<view class="goodtext">
				{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				goodlist:[], // 放请求到的数据
				navlist:[
					{name: "全部", nav: 'all'},
					{name: "问答", nav: 'ask'},
					{name: "分享", nav: 'share'},
					{name: "招聘", nav: 'job'},
					{name: "精华", nav: 'good'},
				], //头部数据
				datalength:10,
				params:{
					page: 1, // 页码
					limit: 10, // 每页的条数
					tab:'all', // 默认筛选所有数据
				}
			}
		},
		onLoad() {
			// 请求数据  封装好了promise
			this.getGood()

		},
		onReachBottom() {
			// 上拉到底部  加载
			// 什么时候说明数据已经加载完毕 最后一页要加载的数据小于每页的条数
			if(this.datalength < this.params.limit){
				alert("数据已经加载完毕，没有了~~~~");
				return  false;
				
			}
			console.log("上拉到底部");
			this.params.page++;// 页码数
			this.getGood();
		},
		onPullDownRefresh() {
			// 下拉刷新
			this.params.page = 1;// 页码数
			this.goodlist = [];
			this.getGood();
		},
		methods: {
			getGood(){  //封装
				uni.request({
					url: 'https://cnodejs.org/api/v1/topics',
					data:this.params  // 用来做筛选
				}).then(res=>{
					console.log(res);
					let [fail, data] = res
					this.goodlist = [...this.goodlist, ...data.data.data]; // 使用展开运算符把两个数组合并成一个数组
					
					this.datalength = data.data.data.length;
				})
			},
			change(nav){
				console.log(nav);
				this.params.tab = nav;
				this.goodlist = [];  // 切换时把数组中的数据清空
				console.log(this.params);
				this.getGood()
			},
			goto(id){
				// 跳转详情
				// 传参只有一种方式  ? 拼接， 多个参数  &  连接
				uni.navigateTo({
					url:"/pages/detail/detail?id=" + id
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.goodnav{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.navitem{
			flex: 1;
			border: 1px solid #ccc;
			text-align: center;
		}
		.active{
			background-color: skyblue;
		}
	}
	
</style>
